<script setup>
import {inject, onMounted, ref, computed, getCurrentInstance} from "vue";
import { addMemberApply } from '@/api/member.js'
import { useMessage } from 'naive-ui'
import GeoJson from "@/assets/china_provinces.json";
const message = useMessage()
const formRef = ref(null)

const form = ref({
	applySource: 1, // 1、PC申请
	brand: '',
	contactsEmail: '',
	contactsMobile: '',
	contactsName: '',
	contactsPhone: '',
	contactsPosition: '',
	contactsQq: '',
	contactsWechat: '',
	corporationEmail: '',
	corporationMobile: '',
	corporationName: '',
	corporationPhone: '',
	corporationPosition: '',
	foundDate: null,
	invoicingAddr: '',
	invoicingBank: '',
	invoicingBlurb: '',
	invoicingCode: '',
	invoicingEnterpriseType:  1,
	invoicingFax: '',
	invoicingPhone: '',
	invoicingTax: '',
	invoicingUrl: '',
	joinType:  null,
	licenseFileIds: null,
	licenseFileUrl: null,
	mainBusiness: '',
	photoFileIds: null,
	directorFileUrl: null,
	postAddr: null,
	postArea: null,
	postCity: null,
	postProvince: null,
	productIntro: '',
	qualityCertification: '',
	registerAddr: null,
	registerArea: null,
	registerCity: null,
	registerProvince: null,
	registerCapital: '',
	unitName: ''
})
const businessData = ref({
	productCreate: null, // 产品生成
	productSell: null, // 产品销售
	productSum: null, // 系统集成
	productAlarm: null, // 报警运营
	technicalMid: null, // 技术中介
	technicalSci: null, // 科研单位
	training: null, // 培训机构
	iTService: null, //信息服务
	other: null, // 其他
})
const rules = {
    applySource: [{
		required: true,
		trigger: 'change',
		validator: (rule, value) => !!value || new Error('请选择入会选项')
	}],
    registerProvince: [{
		required: true,
		trigger: 'change',
		validator: (rule, value) => {
			const { registerAddr, registerArea, registerCity, registerProvince} = form.value
			return !!(registerAddr && registerArea && registerCity && registerProvince) || new Error('请选择注册地址')
		}
	}],
    postProvince: [{
		required: true,
		trigger: 'change',
		validator: (rule, value) => {
			const { postAddr, postArea, postCity, postProvince} = form.value
			return !!(postAddr && postArea && postCity && postProvince) || new Error('请选择邮寄地址')
		}
	}],
    unitName: [{ required: true, message: '请输入单位名称', trigger: 'input' }],
    foundDate: [{
		required: true,
		trigger: 'change',
		validator: (rule, value) => !!value || new Error('请选择成立日期')
	}],
    registerCapital: [{
		required: true,
		trigger: 'input',
		validator: (rule, value) => {
			if(value){
				return isNaN(value) ? new Error('注册资本必须为数字') : true
			}
			return new Error('请输入注册资本')
		}
	}],
    corporationName: [{ required: true, message: '请输入法定代表姓名', trigger: 'input' }],
    contactsName: [{ required: true, message: '请输入联系人姓名', trigger: 'input' }],
    invoicingTax: [{ required: true, message: '请输入开票企业税号', trigger: 'input' }]
}
const joinTypeOptions = [
	{ label: '注册地址', value: 1 }
]

// 地址格式调整
const formGeoData = (data) => {
	return data.map(item => {
		return {
			...item,
			label: item.ssqname,
			value: item.ssqname
		}
	})
}
// 获取各级地址选项
const regCityOption = computed(() => {
	const province = GeoJson.find(p => p.ssqname === form.value.registerProvince)
	form.value.registerCity = null
	return province?.city || []
})
const regAreaOption = computed(() => {
	const province = regCityOption.value.find(c => c.ssqname === form.value.registerCity)
	form.value.registerArea = null
	return province?.area || []
})
const postCityOption = computed(() => {
	const province = GeoJson.find(p => p.ssqname === form.value.postProvince)
	form.value.postCity = null
	return province?.city || []
})
const postAreaOption = computed(() => {
	const province = postCityOption.value.find(c => c.ssqname === form.value.postCity)
	form.value.postArea = null
	return province?.area || []
})


const createList = (list) => {
	return list.map(item => ({
		label: item,
		value: item
	}));
}

const productCreateList = [
	"入侵报警",
	'视频监控',
	'出入口控制',
	'实体防护',
	'防爆安检',
	'人体生物特征识别',
	'软件平台',
	'车辆防盗',
	'电子巡更',
	'其他',
]
const productSumList = [
	'公安',
	'司法',
	'军工',
	'交通',
	'教育',
	'金融',
	'文博',
	'能源',
	'医疗',
	'社区',
	'其他'
]


// 图片上传
const { proxy } = getCurrentInstance()
const licenseAction = import.meta.env.VITE_APP_API_URL + "/member/addLicenseImg/noAuth";
const directorAction = import.meta.env.VITE_APP_API_URL + "/member/addPhotoImg/noAuth";
// 图片尺寸检测
const photoBeforeUpload = (file) => {
	let isRightSize = file.file.file.size / 1024 / 1024 < 5;
	if (!isRightSize) {
		message.error("文件大小超过 5MB");
	}
	return isRightSize;
};
// 图片清理
const handleRemoveLicense = (file, fileList) => {
	form.value.licenseFileUrl = null;
	form.value.licenseFileIds = [];
	proxy.$refs["licenseRef"].clearFiles();
};
const handleRemoveDirector = (file, fileList) => {
	form.value.directorFileUrl = null;
	form.value.photoFileIds = [];
	proxy.$refs["directorRef"].clearFiles();
};
// 图片上传成功
const uploadSuccessLicense = (e) => {
	const response = JSON.parse(e.event.srcElement.response)
	if (response.code === 200) {
		form.value.licenseFileIds = response.data.id ? [response.data.id] : [];
		form.value.licenseFileUrl = response.data.accessUrl;
	} else {
		form.value.licenseFileIds = [];
		form.value.licenseFileUrl = null;
	}
};
const uploadSuccessDirector = (e) => {
	const response = JSON.parse(e.event.srcElement.response)
	console.log(response);
	if (response.code === 200) {
		form.value.photoFileIds = response.data.id ? [response.data.id] : [];
		form.value.directorFileUrl = response.data.accessUrl;
	} else {
		form.value.photoFileIds = [];
		form.value.directorFileUrl = null;
	}
};

// 检测电话格式
const checkPhone = (value) => {
	if (value) {
		const reg = /^1[3456789]\d{9}$/;
		return reg.test(value)
	}
	return true
};

// 提交
const submit = () => {
	const { contactsMobile, contactsPhone, corporationMobile, corporationPhone, invoicingPhone } = form.value
	if(!checkPhone(contactsMobile)){
		message.error("联系人手机号码格式不正确");
		return
	}
	if(!checkPhone(contactsPhone)){
		message.error("联系人电话号码格式不正确");
		return
	}
	if(!checkPhone(corporationMobile)){
		message.error("法定代表手机号码格式不正确");
		return
	}
	if(!checkPhone(corporationPhone)){
		message.error("法定代表电话号码格式不正确");
		return
	}
	if(!checkPhone(invoicingPhone)){
		message.error("开票信息电话号码格式不正确");
		return
	}
	proxy.$refs.formRef.validate(async (errors) => {
		if (!errors) {
			const create = (businessData.value.productCreate || []).map(e => e+'(产品生产)')
			const sell = (businessData.value.productSell || []).map(e => e+'(产品销售)')
			const sum = (businessData.value.productSum || []).map(e => e+'(系统集成)')
			const alarm = (businessData.value.productAlarm || []).map(e => e+'(报警运营)')
			const { technicalMid, technicalSci, training, iTService, other } = businessData.value
			const mainBusiness = [
				...create,
				...sell,
				...sum,
				...alarm,
				...technicalMid || [],
				...technicalSci || [],
				...training || [],
				...iTService || [],
				...other || []
			].join(',')
			const res = await addMemberApply({ ...form.value, mainBusiness })
			if(res.data.code === 200) {
				message.success('提交成功')
			}else{
				message.error('提交失败')
			}
			form.value = {
				applySource: 1, // 1、PC申请
				brand: '',
				contactsEmail: '',
				contactsMobile: '',
				contactsName: '',
				contactsPhone: '',
				contactsPosition: '',
				contactsQq: '',
				contactsWechat: '',
				corporationEmail: '',
				corporationMobile: '',
				corporationName: '',
				corporationPhone: '',
				corporationPosition: '',
				foundDate: null,
				invoicingAddr: '',
				invoicingBank: '',
				invoicingBlurb: '',
				invoicingCode: '',
				invoicingEnterpriseType:  1,
				invoicingFax: '',
				invoicingPhone: '',
				invoicingTax: '',
				invoicingUrl: '',
				joinType:  null,
				licenseFileIds: null,
				licenseFileUrl: null,
				mainBusiness: '',
				photoFileIds: null,
				directorFileUrl: null,
				postAddr: null,
				postArea: null,
				postCity: null,
				postProvince: null,
				productIntro: '',
				qualityCertification: '',
				registerAddr: null,
				registerArea: null,
				registerCity: null,
				registerProvince: null,
				registerCapital: '',
				unitName: ''
			}
			businessData.value = {
				productCreate: null,
				productSell: null,
				productSum: null,
				productAlarm: null,
				technicalMid: null,
				technicalSci: null,
				training: null,
				iTService: null,
				other: null,
			}
		}
	})
}
</script>

<template>
	<div class="pageContent">
		<n-space
			align="center"
			justify="space-between"
			style="margin-bottom: 20px"
		>
			<n-h6 class="pageTitle" prefix="bar">
				<div>会员注册</div>
			</n-h6>
		</n-space>
		<n-divider class="pageDivider"></n-divider>
		
		<n-form
			ref="formRef"
			:label-placement="'top'"
			label-width="80"
			require-mark-placement="left"
			style="margin-bottom: 10px"
			:rules="rules"
			:model="form"
		>
			<n-divider style="--n-color: #666666"><span style="color: #666666;">企业基本信息</span></n-divider>
			<n-grid :cols="2" :x-gap="40">
				<n-form-item-gi :span="1" label="入会选项" label-style="font-weight: bold" path="applySource">
					<n-select v-model:value="form.joinType" :options="joinTypeOptions"></n-select>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="注册地址" label-style="font-weight: bold" path="registerProvince">
					<n-input-group>
						<n-select v-model:value="form.registerProvince" :options="formGeoData(GeoJson)"></n-select>
						<n-select v-model:value="form.registerCity" :options="formGeoData(regCityOption)"></n-select>
						<n-select v-model:value="form.registerArea" :options="formGeoData(regAreaOption)"></n-select>
						<n-input v-model:value="form.registerAddr" placeholder="详细地址"></n-input>
					</n-input-group>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="单位名称" label-style="font-weight: bold" path="unitName">
					<n-input v-model:value="form.unitName"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="邮寄地址" label-style="font-weight: bold" path="postProvince">
					<n-input-group>
						<n-select v-model:value="form.postProvince" :options="formGeoData(GeoJson)"></n-select>
						<n-select v-model:value="form.postCity" :options="formGeoData(postCityOption)"></n-select>
						<n-select v-model:value="form.postArea" :options="formGeoData(postAreaOption)"></n-select>
						<n-input v-model:value="form.postAddr" placeholder="邮寄地址"></n-input>
					</n-input-group>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="成立日期" label-style="font-weight: bold" path="foundDate">
					<n-date-picker style="width: 100%" v-model:value="form.foundDate"></n-date-picker>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="注册资本" label-style="font-weight: bold" path="registerCapital">
					<n-input v-model:value="form.registerCapital">
						<template #suffix>
							<n-text italic>
								万元
							</n-text>
						</template>
					</n-input>
				</n-form-item-gi>
			</n-grid>
			
			<n-divider style="--n-color: #666666"><span style="color: #666666;">法定代表情况</span></n-divider>
			<n-grid :cols="2" :x-gap="40">
				<n-form-item-gi :span="1" label="姓名" label-style="font-weight: bold" path="corporationName">
					<n-input v-model:value="form.corporationName" ></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="职务" label-style="font-weight: bold">
					<n-input v-model:value="form.corporationPosition" ></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="电话号码" label-style="font-weight: bold">
					<n-input v-model:value="form.corporationPhone" ></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="电子邮箱" label-style="font-weight: bold">
					<n-input v-model:value="form.corporationEmail" ></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="手机号码" label-style="font-weight: bold">
					<n-input v-model:value="form.corporationMobile" ></n-input>
				</n-form-item-gi>
			</n-grid>

			<n-divider style="--n-color: #666666"><span style="color: #666666;">联系人情况</span></n-divider>
			<n-grid :cols="2" :x-gap="40">
				<n-form-item-gi :span="1" label="姓名" label-style="font-weight: bold" path="contactsName">
					<n-input v-model:value="form.contactsName"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="职务" label-style="font-weight: bold">
					<n-input v-model:value="form.contactsPosition"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="电话号码" label-style="font-weight: bold">
					<n-input v-model:value="form.contactsPhone"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="电子邮箱" label-style="font-weight: bold">
					<n-input v-model:value="form.contactsEmail"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="手机号码" label-style="font-weight: bold">
					<n-input v-model:value="form.contactsMobile"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="QQ号" label-style="font-weight: bold">
					<n-input v-model:value="form.contactsQq"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="微信号" label-style="font-weight: bold">
					<n-input v-model:value="form.contactsWechat"></n-input>
				</n-form-item-gi>
			</n-grid>
			
			<n-divider style="--n-color: #666666"><span style="color: #666666;">开票信息情况</span></n-divider>
			<n-grid :cols="2" :x-gap="40">
				<n-form-item-gi :span="1" label="企业税号" label-style="font-weight: bold" path="invoicingTax">
					<n-input v-model:value="form.invoicingTax"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="电话" label-style="font-weight: bold">
					<n-input v-model:value="form.invoicingPhone"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="地址" label-style="font-weight: bold">
					<n-input v-model:value="form.invoicingAddr"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="开户行" label-style="font-weight: bold">
					<n-input v-model:value="form.invoicingBank"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="开票代码" label-style="font-weight: bold">
					<n-input v-model:value="form.invoicingCode"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="网址" label-style="font-weight: bold">
					<n-input v-model:value="form.invoicingUrl"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="传真号码" label-style="font-weight: bold">
					<n-input v-model:value="form.invoicingFax"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="企业类型" label-style="font-weight: bold">
					<n-radio-group v-model:value="form.invoicingEnterpriseType">
						<n-space>
							<n-radio :value="1">上市公司</n-radio>
							<n-radio :value="2">非上市公司</n-radio>
						</n-space>
					</n-radio-group>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="企业简介" label-style="font-weight: bold">
					<n-input
					 	v-model:value="form.invoicingBlurb"
						type="textarea"
						placeholder="不超过500字符"
						maxlength="500"
						show-count
						:autosize="{ minRows: 5 }"
					></n-input>
				</n-form-item-gi>
			</n-grid>
			
			<n-divider style="--n-color: #666666"><span style="color: #666666;">主营范围</span></n-divider>
			<n-grid :cols="5" :x-gap="40">
				<n-form-item-gi :span="5" label-placement="left" label="产品生产" label-style="font-weight: bold; padding-bottom: 15px;">
					<n-checkbox-group v-model:value="businessData.productCreate" style="width: 100%">
						<n-grid :cols="5" :y-gap="10">
							<n-gi v-for="item in createList(productCreateList)" :span="1">
								<n-checkbox :value="item.value" :key="item.value">{{ item.label }}</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label-placement="left" label="产品销售" label-style="font-weight: bold; padding-bottom: 15px;">
					<n-checkbox-group v-model:value="businessData.productSell" style="width: 100%">
						<n-grid :cols="5" :y-gap="10">
							<n-gi v-for="item in createList(productCreateList)" :span="1">
								<n-checkbox :value="item.value" :key="item.value">{{ item.label }}</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label-placement="left" label="系统集成" label-style="font-weight: bold; padding-bottom: 15px;">
					<n-checkbox-group v-model:value="businessData.productSum" style="width: 100%">
						<n-grid :cols="5" :y-gap="10">
							<n-gi v-for="item in createList(productSumList)" :span="1">
								<n-checkbox :value="item.value" :key="item.value">{{ item.label }}</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label-placement="left" label="报警运营" label-style="font-weight: bold; padding-bottom: 15px;">
					<n-checkbox-group v-model:value="businessData.productAlarm" style="width: 100%">
						<n-grid :cols="5" :y-gap="10">
							<n-gi v-for="item in createList(productSumList)" :span="1">
								<n-checkbox :value="item.value" :key="item.value">{{ item.label }}</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label-placement="left" label="技术中介" label-style="font-weight: bold;">
					<n-checkbox-group v-model:value="businessData.technicalMid" style="width: 100%">
						<n-grid :cols="5" :y-gap="10">
							<n-gi v-for="item in ['技术中介']" :span="1">
								<n-checkbox :value="item" :key="item">{{ item }}</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label-placement="left" label="科研单位" label-style="font-weight: bold;">
					<n-checkbox-group v-model:value="businessData.technicalSci" style="width: 100%">
						<n-grid :cols="5" :y-gap="10">
							<n-gi v-for="item in ['科研单位']" :span="1">
								<n-checkbox :value="item" :key="item">{{ item }}</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label-placement="left" label="培训机构" label-style="font-weight: bold;">
					<n-checkbox-group v-model:value="businessData.training" style="width: 100%">
						<n-grid :cols="5" :y-gap="10">
							<n-gi v-for="item in ['培训机构']" :span="1">
								<n-checkbox :value="item" :key="item">{{ item }}</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label-placement="left" label="信息服务" label-style="font-weight: bold;">
					<n-checkbox-group v-model:value="businessData.iTService" style="width: 100%;">
						<n-grid :cols="5" :y-gap="10">
							<n-gi v-for="item in ['信息服务']" :span="1">
								<n-checkbox :value="item" :key="item">{{ item }}</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label-placement="left" label="其他" label-style="font-weight: bold;">
					<n-checkbox-group v-model:value="businessData.other" style="width: 100%">
						<n-grid :cols="5" :y-gap="10">
							<n-gi v-for="item in ['其他']" :span="1">
								<n-checkbox :value="item" :key="item">{{ item }}</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label="产品品牌" label-style="font-weight: bold">
					<n-input v-model:value="form.brand"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label="主要产品名称及性能" label-style="font-weight: bold">
					<n-input v-model:value="form.productIntro" type="textarea"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label="质量保证体系认证" label-style="font-weight: bold">
					<n-input v-model:value="form.qualityCertification" type="textarea"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label="营业执照" label-style="font-weight: bold">
					<n-upload
						v-if="!form.licenseFileUrl"
						ref="licenseRef"
						style="width: 30%"
						:max="1"
						:directory="false"
						list-type="image"
						:action="licenseAction"
						:accept="'image/jpeg,image/png'"
						:on-before-upload="photoBeforeUpload"
						:on-remove="handleRemoveLicense"
						:on-finish="uploadSuccessLicense"
						:show-file-list="false">
						<n-upload-dragger>
							<div style="margin-bottom: 12px">
								<n-icon size="48" :depth="3">
									<Files />
								</n-icon>
							</div>
							<n-text style="font-size: 16px">
								点击或者拖动文件到该区域来上传
							</n-text>
							<n-p depth="3" style="margin: 8px 0 0 0">
								上传文件限制格式: jpg, jpeg, png大小限5MB内
							</n-p>
						</n-upload-dragger>
					</n-upload>
					<div class="card-box" v-else>
						<n-image
							class="card-img"
							:src="form.licenseFileUrl"
							object-fit="contain"
							width="100%"
						/>
						<div class="clear-btn" @click="handleRemoveLicense">删除图片</div>
					</div>
				</n-form-item-gi>
				<n-form-item-gi :span="5" label="负责人照片" label-style="font-weight: bold">
					<n-upload
						v-if="!form.directorFileUrl"
						ref="directorRef"
						style="width: 30%"
						:max="1"
						:directory="false"
						list-type="image"
						:action="directorAction"
						:accept="'image/jpeg,image/png'"
						:on-before-upload="photoBeforeUpload"
						:on-remove="handleRemoveDirector"
						:on-finish="uploadSuccessDirector"
						:show-file-list="false">
						<n-upload-dragger>
							<div style="margin-bottom: 12px">
								<n-icon size="48" :depth="3">
									<Files />
								</n-icon>
							</div>
							<n-text style="font-size: 16px">
								点击或者拖动文件到该区域来上传
							</n-text>
							<n-p depth="3" style="margin: 8px 0 0 0">
								上传文件限制格式: jpg, jpeg, png大小限5MB内
							</n-p>
						</n-upload-dragger>
					</n-upload>
					<div class="card-box" v-else>
						<n-image
							class="card-img"
							:src="form.directorFileUrl"
							object-fit="contain"
							width="100%"
						/>
						<div class="clear-btn" @click="handleRemoveDirector">删除图片</div>
					</div>
				</n-form-item-gi>
			</n-grid>
		</n-form>
		<n-space justify="center">
			<n-button type="primary" @click="submit">提交注册</n-button>
		</n-space>
	</div>
</template>

<style scoped>
	.card-box{
		position: relative;
	}
	.card-img{
		width: 360px;
		height: 210px;
	}
	.clear-btn{
		width: 90px;
		height: 30px;
		display: flex;
		font-weight: normal;
		font-size: 15px;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #ffffff;
		background-color: gray;
		position: absolute;
		right: 30px;
		bottom: 30px;
	}
</style>
